<template>
    <div>   
        <com-mask :show="show"></com-mask>

        <transition name="yk-scale">
            <div class="yk-dialog-box" v-show="show">
                <div class="yk-dialog">
                    <div class="yk-dialog__inner">
                        <div class="yk-dialog__title">{{ title }}</div>
                        <div class="yk-dialog__content" v-if="content">{{ content }}</div>
                        <div class="yk-dialog__loading" v-if="type === 'loading'"></div>
                        <div class="yk-dialog__prompt" v-if="type === 'prompt'">
                            <input 
                                type="text" 
                                maxlength="20" 
                                v-model.trim="text"
                                @blur="blur"
                                @focus="focus"
                            >
                        </div>
                    </div>
                    <div class="yk-dialog__bottom" v-if="type !== 'loading'">
                        <button class="yk-dialog__btn" @click="cancel" v-if="type !== 'alert'">取消</button>
                        <button class="yk-dialog__btn" @click="confirm"><strong>确定</strong></button>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
// 遮罩
import Mask from "../../mask";

export default {
    name: "YK-Dialog",
    components: {
        "com-mask": Mask
    },
    data() {
        return {
            show: false,    // 是否显示
            title: "",      // 标题
            content: "",    // 内容
            type: "",       // 类型
            text: "",       // 文本内容
            scrollTop: 0    // 记录滚动条位置
        }
    },
    methods: {
        // 修复ios失去焦点后底部空白
        // 获得焦点
        focus() {
            this.scrollTop = document.body.scollTop || document.documentElement.scrollTop;
        },

        // 失去焦点返回顶部
        blur() {
            window.scrollTo(this.crollTop);
        },

        // 显示
        display(type = "alert", title = "", content = "") {
            [this.type, this.title, this.content] = [type, title, content];

            this.$nextTick(() => {
                this.show = true;
            });
        },

        // 隐藏
        hide() {
            this.show = false;
        },

        // 取消
        cancel() {
            this.callback();
            this.show = false;
        },

        // 确定
        confirm() {
            if (this.type === "prompt" && this.text === "") {
                return;
            } 

            let data = this.type === "prompt" ? this.text : true;

            this.callback(data);
            this.show = false;
            this.text = "";
        }
    }
}
</script>

<style lang="scss">
.yk-dialog {
    width: 280px;
    background-color: rgba(255,255,255,.94);
    border-radius: calc(var(--yk-border-radius) * 2);

    &-box {
        position: fixed;
        left: 0;
        top: 0;
        z-index: var(--yk-z-index-dialog);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    &__inner {
        padding: var(--yk-gap);
        text-align: center;
    }

    &__title {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.3;
    }

    &__content {
        margin-top: 5px;
        font-size: 14px;
        line-height: 1.3;
    }

    &__loading {
        width: 38px;
        height: 38px;
        margin: var(--yk-gap) auto 0;
        background: url(../imgs/loading_black.svg) center / 100% 100% no-repeat;
        animation: yk-preloader 1s steps(12, end) infinite;
    }

    &__prompt {
        margin-top: 15px;

        input {
            width: 100%;
            height: 34px;
            padding: 0 .8em;
            font-size: 16px;
            border: 1px solid var(--yk-border-color);
            border-radius: 4px;
            outline: none;
        }
    }

    &__bottom {
        display: flex;
        border-top: .5px solid rgba(0,0,0,.3);
    }

    &__btn {
        flex: 1;
        height: 46px;
        font-size: 16px;
        color: var(--yk-main-color);
        border: none;
        background: none;
        outline: none;
        border-left: .5px solid rgba(0,0,0,.3);

        &:first-child {
            border-left: none;
        }
    }
}
</style>
